<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/react@18.1.0/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18.1.0/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="./layui/css/layui.css" />
    <!-- 引入 layui.js -->
    <script src="./layui/layui.js"></script>
    <script src="./jQuery.min.js"></script>
    <link rel="stylesheet" href="./base.css">
    <link rel="stylesheet" href="./index.css">
    <title>Document</title>
  </head>
  <body>
    <button id="add" type="button" class="layui-btn add-btn">添加用户</button>
    <hr class="hr"/>
    <script>
      layui.use(["layer", "table", "laypage", "jquery"], function () {
        var layer = layui.layer, // 弹层
          /* table = layui.table, // 表格
          laypage = layui.laypage, // 分页*/
          $ = layui.jquery;
 
        $("#add").on("click", function () {
          layer.open({
            // 调整弹框的大小
            area: ["500px", "300px"],
            shadeClose: true, // 点击旁边的地方自动关闭
            // 动画
            anim: 2,
            // 弹出层的基本类型
            type: 2,
            // 刚才定义的弹窗页面
            content: './add.html',
          });
        });
      });
    </script>
  </body>
</html>
